<script setup >
import { ref, reactive, onMounted, toRaw } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
const totalcount = ref(0);
// 当前页码
const currentPage = ref(1);
//当前页数量
const pageSize = ref(5);
//查询名称
const search = ref("");
const filterTableData = ref([]);
const editDialogVisible = ref(false); //编辑弹窗
const dialogFormVisible = ref(false);
const form = ref({
  cellId: 0,
  cellAddress: "",
  cellArea: 0,
  cellCity: "",
  cellCreateTime: "",
  cellDevelopers: "",
  cellGreening: 0,
  cellHousehold: 0,
  cellImg: "",
  cellName: "",
  cellProperty: 0,
  cellPropertyCompany: "",
  cellProvince: "",
  cellState: 0,
});
onMounted(() => {
  serch();
});
//添加按钮
function add() {
  dialogFormVisible.value = true;
  form.value = {
    // 在确认添加后清空表单数据
    cellId: 0,
    cellAddress: "",
    cellArea: 0,
    cellCity: "",
    cellCreateTime: "",
    cellDevelopers: "",
    cellGreening: 0,
    cellHousehold: 0,
    cellImg: "",
    cellName: "",
    cellProperty: 0,
    cellPropertyCompany: "",
    cellProvince: "",
    cellState: 0,
  };
  // https://localhost:44397/api/Cellmanagement
}
//添加功能
const addData = () => {
  console.log(form.value);
  //添加信息
  axios
    .post("/api/api/Cellmanagement", form.value, {
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then((response) => {
      console.log(response.data);
      if (response.data === 1) {
        ElMessage.success("添加成功");
        dialogFormVisible.value = false; // 关闭对话框
        serch(); // 刷新页面数据
      } else {
        ElMessage.error("添加失败，请重试！");
      }
    });
};
const editForm = ref({
  cellId: 0,
  cellAddress: null,
  cellArea: 0,
  cellCity: null,
  cellCreateTime: null,
  cellDevelopers: null,
  cellGreening: 0,
  cellHousehold: 2,
  cellImg: null,
  cellName: null,
  cellProperty: 0,
  cellPropertyCompany: null,
  cellProvince: null,
  cellState: 0
  });
    //编辑功能
    const updateData = () => {
    console.log(editForm.value.cellId);
      console.log(editForm.value);
    axios
      .put(
        `/api/api/Cellmanagement?id=${editForm.value.cellId}`,editForm.value
        ,{
        headers: {
          "Content-Type": "application/json",
        },
        }
      )
      .then(function (response) {
        console.log(response.data);
        if (response.data) {
          ElMessage({
            message: "更新成功",
            type: "success",
          });
          serch(); // 刷新页面
        } else {
          ElMessage.error("更新失败，请重试！");
        }
      })
     
  };
  //编辑显示功能
  const editData = (row) => {
      console.log(row);
        editDialogVisible.value = true;
        
        editForm.value=row;
      
  };
   //删除按钮
   function Delete(cellId) {
    console.log(cellId)
  axios.delete(`/api/api/Cellmanagement?id=${cellId}`)
    .then((response) => {
       if (response.status === 200) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          dialogFormVisible.value = false;
        } else {
          ElMessage({
            message: "删除失败",
            type: "waring",
          });
        }
        serch(); // 刷新页面
    })
    .catch((error) => {
      console.error(error.response.data); // 获取服务器返回的详细错误信息
      console.error(error.response.status); // 获取HTTP状态码
      console.error(error.response.statusText); // 获取HTTP状态码对应的文本描述
    });
  }

//分页显示数量发生改变时候触发
function handleSizeChange() {
  console.log("分页显示数量发生改变时候触发");
  serch();
}
//分页吗发生改变时候触发
function handleCurrentChange() {
  console.log("分页吗发生改变时候触发");
  serch();
}
//查询数据和总条数
function serch() {
  console.log("页码" + currentPage.value);
  console.log("页数" + pageSize.value);
  // 发起 GET 请求
  axios
    .get(
      `/api/api/Cellmanagement?page=${pageSize.value}&pagenum=${currentPage.value}&name=${search.value}`
    )
    .then((response) => {
      //console.log(response.data);
      filterTableData.value = response.data.data;
      totalcount.value = response.data.totalCount;
      console.log(filterTableData.value);
    })
    .catch((error) => {
      console.error(error);
    });
}
function Mser() {
  serch();
}
</script>
<template>
    <el-row>
      <el-button type="primary" @click="add()" style="width: 120px;">添加</el-button>
  </el-row>
  <el-row>
    <el-table :data="filterTableData" style="width: 100%" class="transparent-form">
      <el-table-column label="名称" prop="cellName" />
      <el-table-column label="所在市" prop="cellCity" />
      <el-table-column label="面积" prop="cellArea" />
      <el-table-column label="所处位置" prop="cellAddress" />
      <el-table-column label="绿化率" prop="cellGreening" />
      <el-table-column label="总户数" prop="cellHousehold" />
      <el-table-column label="所属物业" prop="cellProperty" />
      <el-table-column label="物业公司名" prop="cellPropertyCompany" />
      <el-table-column label="状态" prop="cellState" >
        <template v-slot="{ row }">
      {{ row.cApplication === 0 ? '正在申请' : '申请成功' }}
    </template>
      </el-table-column>
      <el-table-column align="right">
        <template #default="scope">
          <el-button type="success" plain @click="editData(scope.row)">更新</el-button>
          <el-button type="danger" plain @click="Delete(scope.row.cellId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 
      
  
     <!-- 分页 -->
     <div class="demo-pagination-block">
      <el-pagination
      v-model:current-page="currentPage"
       v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-row>
    <!-- 添加模态框 -->
    <el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
         <el-input v-model="form.cellName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所处位置" :label-width="formLabelWidth">
         <el-input v-model="form.cellAddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="面积" :label-width="formLabelWidth">
         <el-input v-model="form.cellArea" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所在市" :label-width="formLabelWidth">
        <el-input v-model="form.cellCity" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.cellCreateTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="开发商" :label-width="formLabelWidth">
        <el-input v-model="form.cellDevelopers" autocomplete="off" />
      </el-form-item>
      <el-form-item label="绿化率" :label-width="formLabelWidth">
        <el-input v-model="form.cellGreening" autocomplete="off" />
      </el-form-item>
      <el-form-item label="总户数" :label-width="formLabelWidth">
        <el-input v-model="form.cellHousehold" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属物业" :label-width="formLabelWidth">
        <el-input v-model="form.cellProperty" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所在省" :label-width="formLabelWidth">
        <el-input v-model="form.cellProvince" autocomplete="off" />
      </el-form-item>
      <el-form-item label="物业公司名" :label-width="formLabelWidth">
        <el-input v-model="form.cellPropertyCompany" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-input v-model="form.cellState" autocomplete="off" />
      </el-form-item>
    </el-form>
     <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addData()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑" width="500" align-center>
        <el-form :model="editForm" style="display: block;">
          <el-form-item label="" >
         <el-input v-model="editForm.cellId" autocomplete="off" />
      </el-form-item>
        <el-form-item label="名称" >
         <el-input v-model="editForm.cellName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所处位置" >
         <el-input v-model="editForm.cellAddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="面积" >
         <el-input v-model="editForm.cellArea" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所在市" >
        <el-input v-model="editForm.cellCity" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" >
        <el-input v-model="editForm.cellCreateTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="开发商" :label-width="formLabelWidth">
        <el-input v-model="editForm.cellDevelopers" autocomplete="off" />
      </el-form-item>
      <el-form-item label="绿化率" :label-width="formLabelWidth">
        <el-input v-model="editForm.cellGreening" autocomplete="off" />
      </el-form-item>
      <el-form-item label="总户数" :label-width="formLabelWidth">
        <el-input v-model="editForm.cellHousehold" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属物业" :label-width="formLabelWidth">
        <el-input v-model="editForm.cellProperty" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所在省" :label-width="formLabelWidth">
        <el-input v-model="editForm.cellProvince" autocomplete="off" />
      </el-form-item>
      <el-form-item label="物业公司名" :label-width="formLabelWidth">
        <el-input v-model="editForm.cellPropertyCompany" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-input v-model="editForm.cellState" autocomplete="off" />
      </el-form-item>
    </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogVisible=false">关闭</el-button>
            <el-button type="primary" @click="updateData()">保存</el-button>
          </span>
        </template>
      </el-dialog>
</template>

<style>
.transparent-form{
  background-color: transparent;
}
/*最外层透明*/
.el-table, .el-table__expanded-cell{
    background-color: transparent;
}
/* 表格内背景颜色 */
.el-table th,
.el-table tr,
.el-table td {
    background-color: transparent;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

</style>